<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 90vw;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        body>div {
            margin: 2px;
            color: #000;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        .div1>p {
            text-transform: capitalize;
        }

        .div2>p:nth-of-type(1) {
            text-decoration: overline;
        }

        .div2>p:nth-of-type(2) {
            text-decoration: line-through;
        }

        .div2>p:nth-of-type(3) {
            text-decoration: underline;
        }

        .div3 {
            letter-spacing: 5px;
        }

        .div4 {
            word-spacing: 20px;
        }

        .div5 {
            width: 100%;
        }

        .div5>:nth-of-type(1) {
            text-align: left;
        }

        .div5>:nth-of-type(2) {
            text-align: right;
        }

        .div5>:nth-of-type(3) {
            text-align: center;
        }

        .div5>:nth-of-type(4) {
            text-align: justify;
        }


        .div6>p {
            margin: 0;
            font-size: 30px;
        }

        .div6 span {
            font-size: 20px;
        }

        .div6>p:nth-of-type(1)>span {
            vertical-align: baseline;
        }

        .div6>p:nth-of-type(2)>span {
            vertical-align: top;
        }

        .div6>p:nth-of-type(3)>span {
            vertical-align: bottom;
        }

        .div6>p:nth-of-type(4)>span {
            vertical-align: center;
        }

        .div7 {
            text-indent: 2em;
        }

        .div7>:last-child {
            font-size: 14px;
        }

        .div8 {
            width: 300px;
        }

        .p81 {
            white-space: nowrap;
        }

        .p82 {
            white-space: pre;
        }

        .p83 {
            text-overflow: ellipsis;
        }

        .p84 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="div1">
        text-transform: capitalize;每个单词首字母大写
        <br>
        text-transform: uppercase;所有字母大写
        <br>
        text-transform: lowercase;所有字母小写
        <hr>
        <p>
            wertgsr sdfasdf grewgews seafedf
        </p>
    </div>
    <div class="div2">
        <p>
            text-decoration: overline;
        </p>
        <p>
            text-decoration: line-through;
        </p>
        <p>
            text-decoration: underline;
        </p>
    </div>
    <div class="div3">
        letter-spacing: 5px;
        <br>
        调整字符间距
    </div>
    <div class="div4">
        word-spacing: 20px;
        <br>
        调整词与此之间的大小(实际上是调整空格的大小)
        <hr>
        wertgsr sdfasdf grewgews
    </div>
    <div class="div5">
        <p>
            text-align: left; 文本左对齐
        </p>
        <p>
            text-align: right; 文本右对齐
        </p>
        <p>
            text-align: center; 文本居中
        </p>
        <p>
            text-align: justify; 文本两端对齐(通过调整空格实现)
        </p>
    </div>
    <div class="div6">
        我可能对这个文本垂直布局有什么误解。。
        <p>
            vertical-align: baseline;
            <span>
                文本基线对齐
            </span>
        </p>
        <p>
            vertical-align: top;
            <span>
                文本上对齐
            </span>
        </p>
        <p>
            vertical-align: bottom;
            <span>
                文本下对齐
            </span>
        </p>
        <p>
            vertical-align: center;
            <span>
                文本居中
            </span>
        </p>
    </div>
    <div class="div7">
        <div>
            text-indent: 2em;首行缩进
        </div>
        <div>
            四个人走到这里，前边一片密林，又没有路了。
            “悟空，我饿了，找些吃的来。”唐僧往石头上大模大样一坐，说道。
            “我正忙着，你不会自己去找？……又不是没有腿。”孙悟空拄着棒子说。
            “你忙？忙什么？”“你不觉得这晚霞很美吗？”孙悟空说，眼睛还望着天边，“我只有看看这个，才能每天坚持向西走下去啊。”
            “你可以一边看一边找啊，只要不撞到大树上就行。”
            “我看晚霞的时候不做任何事！”
        </div>
    </div>
    <div class="div8">
        <p class="p81">
            white-space:nowrap;不换行————————————
        </p>
        <p class="p82">
            white-space:pre; 保留空白
        </p>
        <p class="p83">
            text-overflow: ellipsis;文本溢出的内容设置省略号
        </p>
        <hr>
        <pre>
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        </pre>
        <p class="p84">
                溢出的部分变成省略号aaaaaaaaaaaaaaaaaa
        </p>
    </div>
    <div style="height: 100px;">

    </div>
</body>

</html>